<template>
  <div>
      <nav-header></nav-header>
      <nav-bread><span>My Cart</span></nav-bread>
      <div class="container">
          <div class="cart">
              <div class="page-title-normal">
                  <h2 class="page-title-h2"><span>My Cart</span></h2>
              </div>
              <div class="item-list-wrap">
                  <div class="cart-item">
                      <div class="cart-item-head">
                          <ul>
                              <li>Items</li>
                              <li>Price</li>
                              <li>Quantity</li>
                              <li>Subtotal</li>
                              <li>Edit</li>
                          </ul>
                      </div>
                      <ul class="cart-item-list">
                          <li v-for="(item,index) in cartList">
                              <div class="cart-tab-1">
                                  <div class="cart-item-check">
                                      <a href="javascript:;" class="checkboc-btn item-check-btn" :class="{'check':item.checked=='1'}" @click="editCart('checked',item)">
                                          <svg class="icon icon-ok">
                                              <use xlink:href="#icon-ok"></use>
                                          </svg>
                                      </a>
                                  </div>
                                  <div class="cart-item-pic">
                                      <img :src="'/static/'+item.productImage" :alt="item.productName">
                                  </div>
                                  <div class="cart-item-title">
                                      <div class="item-name">{{item.productName}}</div>
                                  </div>
                              </div>
                              <div class="cart-tab-2">
                                  <div class="item-price">{{item.salePrice|currency('￥')}}</div>
                              </div>
                              <div class="cart-tab-3">
                                  <div class="item-quantity">
                                      <div class="select-self select-self-open">
                                          <div class="select-self-area">
                                            <span class="input-sub" @click="editCart('minus',item)">-</span>
                                            <span class="select-ipt">{{item.productNum}}</span>
                                            <span class="input-add" @click="editCart('add',item)">+</span>
                                          </div>
                                      </div>
                                  </div>
                                </div>
                               <div class="cart-tab-4">
                                  <div class="item-price-total">{{item.productNum*item.salePrice|currency('￥')}}</div>
                              </div>
                              <div class="cart-tab-5">
                                  <div class="cart-item-opration">
                                      <a href="javascript:;" class="item-edit-btn" @click="delCartConfirm(item.productId)">
                                          <span class="icon icon-del" style="display: inline-block;width: 10px;height: 10px;background: red;"></span>
                                      </a>
                                  </div>
                              </div>

                          </li>
                      </ul>
                  </div>
              </div>
              <div class="cart-foot-wrap">
                <div class="cart-foot-inner">
                  <div class="cart-foot-l">
                    <div class="item-all-check">
                      <a href="javascript:;" @click="toggleCheckAll">
                        <span class="checkbox-btn item-check-btn" :class="{'check':checkAllFlag}">
                          <svg class="icon icon-ok"></svg>
                        </span>
                        <span>Select All</span>
                      </a>
                    </div>
                    <div class="item-all-del">
                      <a href="javascript:;" class="item-del-btn">
                        Delete Selected
                      </a>
                    </div>
                  </div>
                  <div class="cart-foot-r">
                    <div class="item-total">
                      Item total:<span class="total-price">{{totalPrice|currency('￥')}}</span>
                    </div>
                    <div class="btn-wrap">
                      <a href="javascript:;" class="btn btn--red" :class="{'btn--dis':checkedCount==0}" @click="checkOut">CHECK OUT</a>
                    </div>
                  </div>
                </div>
              </div>
          </div>
      </div>
      <modal :mdShow="modalConfirm" @close="closeModal">
        <p slot="message">你确认要删除此条数据吗？</p>
        <div slot="btn-group" style="text-align: center;">
          <a href="javascript:;" class="btn btn--m" @click="delCart">确认</a>
          <a href="javascript:;" class="btn btn--m" @click="modalConfirm=false">关闭</a>
        </div>
      </modal>
      <nav-footer></nav-footer>
  </div>
</template>
<script>
    import "./../assets/css/checkout.css"
    import NavHeader from "@/components/Header"
    import NavFooter from "@/components/Footer"
    import NavBread from "@/components/NavBread"
    import Modal from "@/components/Modal"
    import axios from "axios"    
    export default{
        components:{NavHeader,NavFooter,NavBread,Modal},
        data(){
            return{
                cartList:[],
                modalConfirm:false,
                productId:''
            }
        },
        computed:{
          checkAllFlag(){
            return this.cartList.length==this.checkedCount
          },
          checkedCount(){
            let i=0;
            this.cartList.forEach(item=>{
              if (item.checked=='1') i++;
            })
            return i
          },
          totalPrice(){
            let money=0;
            this.cartList.forEach(item=>{
              if (item.checked=='1') {
               money+=parseInt(item.productNum)*parseFloat(item.salePrice);
              }
            })
            return money
          }
        },
        mounted(){
            this.init();
        },
        methods:{
            init(){
                axios.get("/users/cartList").then(response=>{
                  //console.log(response,"res")
                  let res=response.data;
                  if (res.status=='0') {
                      this.cartList=res.result;
                  }
                })
            },
            delCartConfirm(productId){
              this.productId=productId;
              this.modalConfirm=true;
            },
            delCart(){
              axios.post("users/cartDel",{
                productId:this.productId
              }).then((response)=>{
                let res=response.data;
                if (res.status=='0') {
                  this.modalConfirm=false;
                  this.init();
                }
              })
            },
            closeModal(){

            },  
            editCart(flag,item){
              if (flag=='minus') {
                if (item.productNum<=1) {
                  return;
                }
                item.productNum--;
              } else if(flag=='add'){
                item.productNum++
              } else if(flag=='checked'){
                item.checked=item.checked=='1'?'0':'1'
              }
              axios.post('/users/editCart',{...item}).then(response=>{
                let res=response.data;
              })
            },
            toggleCheckAll(){
              let flag=!this.checkAllFlag;
              this.cartList.forEach(item=>{
                item.checked=flag?'1':'0'
              })
              axios.post("/users/editCheckAll",{checkAll:flag}).then(response=>{
                let res=response.data;
                if (res.status=='0') {
                  console.log("成功全选")
                }
              })
            },
            checkOut(){
              if (this.checkedCount>0) {
                this.$router.push({
                  path:'/address'
                })
              }
            }
        }
    }
</script>